<template>
  <!-- 学科目录 -->
  <div class="dashboard-container">
    <div class="dashboard-text">
      <div>
        <el-card>
          <!-- 表单 -->
          <el-row>
            <el-col :span="20">
              <el-form :inline="true">
                <el-form-item label="目录名称">
                  <el-input v-model="searchId" style="width:180px" placeholder="请输入目录名称"/>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select v-model="State" placeholder="请选择">
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="禁用" value="0"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button @click="formdateclear">清除</el-button>
                  <el-button type="primary" @click="newlist()">搜索</el-button>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="2">
              <el-button v-show="id" type="text" icon="el-icon-back" @click="$router.back()">返回学科</el-button>
            </el-col>
            <el-col :span="2">
              <template #default>
                <el-button type="success" @click="dialogVisible=true">新建目录</el-button>
              </template>
            </el-col>
          </el-row>
          <!-- 页面中展示重要的提示信息。 -->
          <el-row>
            <template #default>
              <!-- :closable="false"警告不可关闭 -->
              <el-alert
                slot="before"
                type="info"
                show-icon
                :closable="false"
                style="line-height:10px;margin-bottom:15px;"
              >数据一共{{ total }}条</el-alert>
            </template>
          </el-row>

          <!-- 表格 -->
          <el-table :data="list" style="width: 100%">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="subjectName" label="所属学科"></el-table-column>
            <el-table-column prop="directoryName" label="目录名称"></el-table-column>
            <el-table-column prop="username" label="创建者"></el-table-column>
            <el-table-column prop="addDate" label="创建日期">
              <template slot-scope="obj">{{ obj.row.addDate | formatDate }}</template>
            </el-table-column>
            <el-table-column prop="totals" label="面试题数量"></el-table-column>
            <el-table-column prop="state" label="状态">
              <template slot-scope="scope">
                <p v-if="scope.row.state === 1">已启用</p>
                <p v-else>已禁用</p>
              </template>
            </el-table-column>
            <el-table-column prop="right" label="操作">
              <template #default="{row}">
                <el-button
                  v-if="row.state === 1"
                  type="text"
                  size="small"
                  @click="enter(row.id,row.state)"
                >启用</el-button>
                <el-button v-else type="text" size="small" @click="enter(row.id,row.state)">禁用</el-button>
                <el-button
                  type="text"
                  size="small"
                  :disabled="row.state === 0"
                  @click="editDirectory(row)"
                >修改</el-button>
                <el-button
                  type="text"
                  size="small"
                  :disabled="row.state === 0"
                  @click="delDirectory(row.id)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row type="flex" justify="end" class="pagination">
            <!-- page-size每页显示条目个数 -->
            <!-- current-page当前页码  @current-change监听分页-->
            <el-pagination
              background
              :page-size="page.pagesize"
              :page-sizes="[5, 10, 20]"
              :current-page="page.page"
              layout="prev, pager, next,sizes, jumper"
              :total="total"
              @current-change="pageChange"
              @size-change="handleSizeChange"
            />
          </el-row>
        </el-card>
        <!-- 弹出框 -->
        <el-dialog :title="`${showText}`" :visible="dialogVisible " @close="btnCancel ">
          <el-form ref="addform" :model="formdate" :rules="rules">
            <el-form-item label="所属学科" prop="subjectID">
              <el-select v-model="formdate.subjectID" placeholder="请选择">
                <el-option
                  v-for="item in lists"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="目录名称" prop="directoryName">
              <el-input v-model="formdate.directoryName" style="width:180px"></el-input>
            </el-form-item>
          </el-form>
          <el-row slot="footer" type="flex" justify="center">
            <el-col :span="6">
              <el-button size="small" type="primary" @click="btnOK">确定</el-button>
              <el-button size="small" @click="btnCancel">取消</el-button>
            </el-col>
          </el-row>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { getDirectoryList, getDirectory, delDirectory, getsubjectName, editDirectory, StateDirectory } from '@/api/directorys.js'
export default {
  name: 'Directorys',
  components: {},
  props: {
    id: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      // subjectId: this.$router.query.id,
      // subjectId: 1,
      State: '',
      searchId: null,
      message: '启用',
      isshow: false,
      // isent: false,
      // 目录列表
      list: [],
      // 所属学科
      lists: [],
      // 状态
      statelist: [],
      page: {
        page: 1, // 当前页码
        pages: 0, // 总页数
        pagesize: 5, // 页大小
        directoryName: '',
        state: null,
        subjectID: null
      },

      formdate: {
        subjectID: null,
        state: '',
        directoryName: '',
        subjectName: ''
      },
      loading: false,
      total: 0,
      dialogVisible: false, // 弹框
      rules: {
        directoryName: [{ required: true, message: '目录名称不能为空', trigger: 'blur' }],
        subjectID: [{ required: true, message: '所属学科不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    showText() {
      return this.formdate.state === 1 ? '修改' : '新增'
    }
  },
  watch: {},
  created() {
    this.getDirectoryList()
    this.getsubjectName()
    // this.StateDirectory()
    this.Subjects()
    console.log(this.$router.query.id)
  },
  mounted() {},
  methods: {
    // 根据学科跳转
    async Subjects() {
      // console.log(this.id)
      if (this.id) {
        // console.log(this.$router.params.id)
        const { data } = await getDirectoryList({
          ...this.page,
          subjectID: this.id
        })
        this.list = data.items
        this.total = data.counts
        // console.log(data)
      } else {
        const { data } = this.getDirectoryList()
        this.list = data.items
        this.total = data.counts
      }
    },
    // 搜索
    newlist() {
      this.page.directoryName = this.searchId
      this.page.state = this.State
      const { data } = this.getDirectoryList(this.page)
      this.list = data.items
      this.total = data.items.length
    },
    // 切换状态
    async enter(id, state) {
      if (state === 1) {
        state = 0
      } else {
        state = 1
      }
      await StateDirectory(id, state)
      this.getDirectoryList()
    },

    // 目录列表数据
    async getDirectoryList() {
      this.loading = true
      const { data } = await getDirectoryList(this.page)
      this.total = data.counts
      this.list = data.items
      // console.log(data)
      this.loading = false
    },
    //  newPage最新页码
    pageChange(newPage) {
      this.page.page = newPage
      this.getDirectoryList() // 获取数据
    },
    // 监听了pagesize事件
    handleSizeChange(newSize) {
      this.page.pagesize = newSize
      this.getDirectoryList()
    },
    // 清除按钮
    formdateclear() {
      this.searchId = ''
      this.State = ''
      this.page = {
        page: 1,
        pages: 0,
        pagesize: 5
      }
      this.getDirectoryList()
    },
    // 确定
    async btnOK() {
      this.$refs.addform
        .validate()
        .then(() => {
          if (this.formdate.state === 1) {
            return editDirectory(this.formdate)
          }
          return getDirectory(this.formdate)
        })
        .then(() => {
          this.$message.success('操作成功')
          this.getDirectoryList()
          this.dialogVisible = false
        })
    },
    // 关闭弹出层
    btnCancel() {
      this.formdate = {
        subjectID: '',
        state: '',
        directoryName: '',
        subjectName: ''
      }
      this.$refs.addform.resetFields()
      this.dialogVisible = false
    },
    // 删除
    async delDirectory(id) {
      try {
        await this.$confirm('确定删除该员工？')
        await delDirectory(id)
        this.$message.success('删除员工成功')
        this.getDirectoryList() // 重新拉取数据
      } catch (error) {
        console.log(error)
      }
    },
    // 获取学科列表
    async getsubjectName() {
      const { data } = await getsubjectName()
      this.lists = data
      // console.log(data)
    },

    // 修改
    async editDirectory(row) {
      this.dialogVisible = true
      this.formdate = row
    }
  }
}
</script>
<style lang='scss' scoped>
.pagination {
  margin-top: 20px;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
